<template>
  <div>
    <el-form-item :label="$t('formgen.rate.max')">
      <el-input-number
        v-model="props.activeData.max"
        :min="1"
        :max="20"
        :placeholder="$t('formgen.rate.max')"
      />
    </el-form-item>
    <el-form-item
      v-if="props.activeData['allow-half'] !== undefined"
      :label="$t('formgen.rate.halfSelected')"
    >
      <el-switch v-model="props.activeData['allow-half']" />
    </el-form-item>
    <el-form-item
      v-if="props.activeData['show-text'] !== undefined"
      :label="$t('formgen.rate.auxiliaryText')"
    >
      <el-switch
        v-model="props.activeData['show-text']"
        @change="rateTextChange"
      />
    </el-form-item>
    <el-form-item
      v-if="props.activeData['show-score'] !== undefined"
      :label="$t('formgen.rate.showScore')"
    >
      <el-switch
        v-model="props.activeData['show-score']"
        @change="rateScoreChange"
      />
    </el-form-item>
    <el-form-item
      v-if="props.activeData['show-stops'] !== undefined"
      :label="$t('formgen.rate.spacer')"
    >
      <el-switch v-model="props.activeData['show-stops']" />
    </el-form-item>
    <el-form-item
      v-if="props.activeData['show-text']"
      :label="$t('formgen.rate.customTexts')"
    >
      <el-button
        type="primary"
        size="small"
        @click="openDialog"
      >
        {{ $t("formgen.rateText.title") }}
      </el-button>
    </el-form-item>

    <RateTextDialog
      v-model:visible="dialogVisible"
      :active-data="props.activeData"
      @update:texts="handleTextsUpdate"
    />
  </div>
</template>

<script setup>
import { defineProps, ref } from "vue";
import RateTextDialog from "./RateTextDialog.vue";

const props = defineProps({
  activeData: {
    type: Object,
    required: true
  }
});

const dialogVisible = ref(false);

const openDialog = () => {
  dialogVisible.value = true;
};

const rateTextChange = val => {
  if (val) {
    props.activeData["show-score"] = false;
  }
};

const rateScoreChange = val => {
  if (val) props.activeData["show-text"] = false;
};

const handleTextsUpdate = ({ texts, textMap }) => {
  props.activeData.texts = texts;
  props.activeData.textMap = textMap;
};
</script>

<style scoped>
.custom-text-item {
  margin-bottom: 8px;
}
</style>
